<template>
  <el-dialog :title="addFlag?'新增菜单':'编辑菜单'" class="addMenu" :visible.sync="dialogFormVisible">
  <el-form :model="form" label-width="80px" :rules="rule" size="small" ref="menuForm">
    <el-form-item label="菜单类型" prop="type">
        <el-radio-group v-model="form.type"  size="small">
            <el-radio-button label='0'>目录</el-radio-button>
            <el-radio-button label='1'>菜单</el-radio-button>
            <el-radio-button label='2'>按钮</el-radio-button>
        </el-radio-group>
    </el-form-item>
    <el-row :gutter="20">
      <el-col :span="10">
    <el-form-item label="菜单图标" v-show="form.type.toString()!='2'" prop="icon">
      <icon-select :icon.sync="form.icon"></icon-select>
    </el-form-item>
      </el-col>
      <el-col :span="10">
    <el-form-item v-show="form.type.toString() !== '2'" label="菜单可见" prop="hidden">
      <el-radio-group v-model="form.hidden" size="mini">
        <el-radio-button label="false">是</el-radio-button>
        <el-radio-button label="true">否</el-radio-button>
      </el-radio-group>
    </el-form-item>
      </el-col>
    </el-row>
    <el-form-item v-if="form.type.toString() !== '2'" label="菜单标题" prop="title">
      <el-input v-model="form.title" placeholder="菜单标题" size="small" />
    </el-form-item>
    <el-form-item v-if="form.type.toString() === '2'" label="按钮名称" prop="title">
      <el-input v-model="form.title" placeholder="按钮名称" size="small" />
    </el-form-item>
    <el-form-item v-show="form.type.toString() !== '0'" label="权限标识" prop="permission">
      <el-input v-model="form.permission" placeholder="权限标识" size="small" />
    </el-form-item>
    <el-form-item v-if="form.type.toString() !== '2'" label="路由地址" prop="path">
      <el-input v-model="form.path" placeholder="路由地址"  size="small" />
    </el-form-item>
    <el-form-item label="菜单排序" prop="menuSort">
      <el-input v-model="form.menuSort" type="number" size="small"/>
    </el-form-item>
    <el-form-item v-show="form.type.toString() === '1'" label="组件名称" prop="componentName">
      <el-input v-model="form.componentName"  placeholder="匹配组件内Name字段" size="small"/>
    </el-form-item>
    <el-form-item v-show="form.type.toString() === '1'" label="组件路径" prop="component">
      <el-input v-model="form.component"  placeholder="组件路径" size="small" />
    </el-form-item>
    <el-form-item label="上级类目" size="small" prop="pid">
        <el-select v-model="form.pTitle" placeholder="请选择上级类目" v-if="dialogFormVisible">
          <el-option :value="form.pid" style="height: auto; padding: 0">
            <el-tree :props="props" @node-click="handleNodeClick" :load="loadNode" lazy>
            </el-tree>
          </el-option>
        </el-select>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false" size="small">取 消</el-button>
    <el-button type="primary" @click="submit" size="small">确 定</el-button>
  </div>
</el-dialog>
</template>

<script>
import iconSelect from '@components/select-icon'
import menuApi from '@apis/menu'
export default {
  components:{iconSelect},
    data(){
        return {
            form: {
              icon: 'el-icon-eleme',
              type: '0',
              pid: '',
              title: '',
              pTitle: ''
            },
            props: {
              label: 'title',
              children: 'hasChildren',
              isLeaf: 'leaf'
            },
            rule:{
              title: [
                {required: true, message: '请填写标题', trigger: 'blur'}
              ],
              path: [
                {required: true, message: '请填写路由地址', trigger: 'blur'}
              ]
            },
            addFlag: false,
            dialogFormVisible: false
        }
    },
    methods: {
        toggleVisible(){
          // 打开对话框，清除校验
          
          this.dialogFormVisible = !this.dialogFormVisible
          if(this.dialogFormVisible && this.$refs.menuForm){
            this.$refs.menuForm.resetFields()
          }
        },
        submit(){
          const API = this.addFlag?menuApi.addMenu:menuApi.updateMenu
          const messageInfo = this.addFlag?'新增成功':'修改成功'
          // 处理三种不同类型的数据 目录 菜单 按钮
          const postData = this.filterData()
          API(postData).then(res=>{
            this.$message.success(messageInfo)
            this.$emit('refreshData')
            this.toggleVisible()
          }).catch(err=>{
            this.$message.error(err.message)
          })
        },
        loadNode(node, resolve){
          if(node.level === 0){
            // menuApi.getMenus(0).then(res=>{
            //   res.unshift({title: '顶级目录', pid: '0', menuId: 0, leaf: true, subCount: 0})
            //   return resolve(res)
            // })
            resolve([{title: '顶级目录', pid: '0', menuId: 0, leaf: false, subCount: 1}])
          }else{
            menuApi.getMenus(node.data.menuId).then(res=>{
              return resolve(res)
            })
          }
        },
        handleNodeClick(data){
          this.form.pid = data.menuId
          this.form.pTitle = data.title
        },
        setForm(data){
          if(!data){
            data = {
              icon: '',
              type: '0',
              pid: ''
            }
            this.addFlag = true
          }else{
            this.addFlag = false
          }
          if(!data.pid){
            data.pTitle = '顶级目录'
          }
          if(!data.pTitle && data.pid){
            // 接口获取父节点信息
            menuApi.getMenusBySearch({menuId:data.pid}).then(res=>{
              data.pTitle = res[0].title
              this.form = data
            })
          }else{
            this.form = data
          }
        },
        /**
         * 处理目录 菜单 按钮的请求数据
         */
        filterData(){
          let result = JSON.parse(JSON.stringify(this.form))
          if(this.form.type==0){
            result.permission = ""
            result.componentName = ''
            result.component = ''
          }else if(this.form.type==2){
            result.componentName = ''
            result.component = ''
            result.icon = ''
            result.hidden = ''
            result.path = ''
          }
          return result
        }
    }
}
</script>

<style style="css" scoped>
  .addMenu .el-form-item{
    margin-bottom: 18px;
  }

  .addMenu >>>.el-form-item__content{
    width: 50%;
  }
  .addMenu >>> .el-dialog__body el-form-item__label{
    font-weight: bold;
  }
</style>